<template>
  <div class="mySwiper">
    <swiper
      class="swiper"
      v-if="stateUrlList.length>0"
      :options="swiperOption"
    >
      <swiper-slide
        v-for="(item,index) in stateUrlList"
        :key="index"
      >
        <div
          @click="handNavTo(item)"
          class="sw_item pointer"
        >
          <img
            class="sw_item_img"
            :src="$store.state.baseUrl+item.img"
            alt=""
          >
          <div class="sw_title">
            {{item.title}}
          </div>
        </div>
      </swiper-slide>

      <div
        class="swiper-pagination swiper-pagination-bullets"
        slot="pagination"
      ></div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  name: "mySwiper.vue",
  props: {
    stateUrlList: {
      type: Array
    },
    ifClick: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },

  watch: {
    stateUrlList(newImg, oldImg) {}
  },
  mounted() {},
  data() {
    return {
      swiperOption: {
        pagination: ".swiper-pagination-bullets",
        paginationClickable: true,
        paginationBulletRender: function(swiper, index, className) {
          return '<span class="' + className + '">' + (index + 1) + "</span>";
        },
        loop: true,
        paginationClickable: true,
        autoplay: 2000,
        observer: true,
        observeParents: true
        // pagination: {
        //   el: ".swiper-pagination",
        //   clickable: true,
        //   renderBullet(index, className) {
        //     return `<span class="${className} swiper-pagination-bullet-custom">${index +
        //       1}</span>`;
        //   }
        // }
      }
      // swiperOption: {
      //   loop: true,
      //   // autoplay: {
      //   //   delay: 3000
      //   // },
      //   pagination: {
      //     el: ".swiper-pagination",
      //     clickable: true,

      //     renderBullet(index, className) {
      //       return `<span class="${className} swiper-pagination-bullet-custom">${index +
      //         1}</span>`;
      //     }
      //   }
      // }
    };
  },

  methods: {
    handNavTo(item) {
      if (this.ifClick) {
        this.$router.push({
          name: "news",
          query: {
            sortId: item.sortId,
            id: "2",
            title: item.aName,
            detailsID: item.id,
            avt: 0
          }
        });
        console.log(item, "首页轮播跳转");
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.swiper-pagination ::v-deep .swiper-pagination-bullet {
  border-radius: 0;
  width: 15px;
  height: 15px;
  text-align: center;
  color: #ffffff;
  font-size: 13px;
}
.swiper-pagination {
  width: auto;
  right: 10px !important;
  left: auto;
}
.swiper-pagination ::v-deep .swiper-pagination-bullet-active {
  background-color: #ac0202 !important  ;
}
.mySwiper {
  // border: dashed;
  width: 100%;
  height: 100%;
  .sw_item {
    width: 604px;
    height: 332px;
    position: relative;
    .sw_title {
      position: absolute;
      bottom: 0;
      z-index: 9999;
      width: 566px;
      height: 35px;
      background-color: rgba(0, 0, 0, 0.4);
      // opacity: 0.5;
      color: #ffffff;
      font-size: 13px;
      line-height: 35px;
      padding-left: 12px;
    }
    .sw_item_img {
      width: 100%;
      height: 100%;
    }
  }
}
.my_swiper-button-prev {
  width: 39.55px;
  height: 60px;
  position: absolute;
  top: 0;
  z-index: 999;
  top: 50%;
  margin-top: -30px;
  left: 9px;
}
.my_next {
  width: 39.55px;
  height: 60px;
  position: absolute;
  top: 0;
  z-index: 999;
  top: 50%;
  margin-top: -30px;
  right: 12px;
}
// .swiper-slide.swiper-slide-next {
//   width: auto !important;
// }
</style>
